<template>
  <div>
    <div>
      <p class="title">
        价格范围
      </p>
      <div class="fengexian"></div>
    </div>
    <div>
      <p class="title">
        下榻日期
      </p>
      <yd-flexbox>
        <yd-flexbox-item>&nbsp;&nbsp;&nbsp;&nbsp;入住</yd-flexbox-item>
        <yd-flexbox-item>离店</yd-flexbox-item>
      </yd-flexbox>
      <yd-flexbox>
        <yd-flexbox-item>
          <div @click="openByDrop($event)" :v-model = "calendar3.display">
            &nbsp;&nbsp;&nbsp;&nbsp;{{month}}月{{day}}日&nbsp;&nbsp;&nbsp;&nbsp;{{dayWeek}}
          </div>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <div @click="openByDrop2($event)" :v-model = "calendar4.display">
            {{month2}}月{{day2}}日&nbsp;&nbsp;&nbsp;&nbsp;{{dayWeek2}}
          </div>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="fengexian"></div>

        <!-- 显示日历 -->
    <div>
      <transition name="fade">
        <div class="calendar-dropdown" :style="{'left':calendar3.left + 'px','top':calendar3.top + 'px'}" v-if="calendar3.show">
          <calendar :zero="calendar3.zero" :lunar="calendar3.lunar" :value="calendar3.value" :begin="calendar3.begin" :end="calendar3.end" @select="calendar3.select"></calendar>
        </div>
      </transition>
    </div>
    <div>
      <transition name="fade">
        <div class="calendar-dropdown" :style="{'left':calendar4.left + 'px','top':calendar4.top + 'px'}" v-if="calendar4.show">
          <calendar :zero="calendar4.zero" :lunar="calendar4.lunar" :value="calendar4.value" :begin="calendar4.begin" :end="calendar4.end" @select="calendar4.select"></calendar>
        </div>
      </transition>
    </div>
    <div>
      <p class="title">
        客人需求
      </p>
      <div style="margin:10px">
        <yd-checkbox-group v-model="checkbox1">
            <yd-checkbox val="1">允许携带宠物</yd-checkbox>
        </yd-checkbox-group>
      </div>    
      <div style="margin:10px">
        <yd-checkbox-group v-model="checkbox2">
            <yd-checkbox val="1">允许吸烟</yd-checkbox>
        </yd-checkbox-group>
      </div>    
      <!-- <div class="fengexian"></div> -->
    </div>
    <div style="text-align:center;margin-top:30px">
      <yd-button size="small" type="danger"><router-link :to="{path:'livelist',query: {start_date:calendar3.display,end_date:calendar4.display,foreign_guest:this.foreign_guest,pet:this.pet}}">查看符合条件的酒店</router-link></yd-button>
    </div>   
  </div>
</template>

<script>
import calendar from './calendar.vue';

export default {
  name: 'hotelSelection',
  components: {
    calendar
  },
  data() {
    return {
      foreign_guest: '',
      pet: '',
      checkbox1: [],
      checkbox2: [],
      weekday: [],
      data: {},
      year: '',
      month: '',
      day: '',
      year2: '',
      month2: '',
      day2: '',
      create_time: '',
      create_time2: '',
      pageNo: 1,
      pageSize: 5,
      list: [],
      monthEng: '',
      monthInEng: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
      imagesdata: [],
      dayWeek: '',
      dayWeek2: '',
      calendar3: {
        display: '',
        show: false,
        zero: true,
        value: [], // 默认日期
        lunar: true, // 显示农历
        select: (value) => {
          this.calendar3.show = false;
          console.log(new Date(value[0], value[1], value[2]));
          console.log(new Date(this.calendar4.value[0], this.calendar4.value[1], this.calendar4.value[2]));
          if (new Date(value[0], value[1] - 1, value[2]) < new Date()) {
            this.$dialog.alert({mes: '入住日期不能小于当前日期！'});
            return;
          }
          if (new Date(value[0], value[1], value[2]) >= new Date(this.calendar4.value[0], this.calendar4.value[1], this.calendar4.value[2])) {
            this.$dialog.alert({mes: '入住日期不能大于或等于离店日期！'});
            return;
          }
          // this.calendar3.value = value;
          this.calendar3.display = value.join('-');
          // 转换成日期
          this.date = new Date(value[0], value[1] - 1, value[2]);
          console.log(this.date);
          console.log('#$%$#%#$%#$%');
          this.dayWeek = this.weekday[this.date.getDay()];
          console.log(this.dayWeek);
          this.year = value[0];
          this.month = value[1];
          var monthInEng1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'];
          this.monthEng = monthInEng1[this.month];
          this.day = value[2];
          this.create_time = this.calendar3.display;

          console.log(this.calendar3.display);
        }
      },
      calendar4: {
        display: '',
        show: false,
        zero: true,
        value: [], // 默认日期
        lunar: true, // 显示农历
        select: (value) => {
          // console.log(value);
          // console.log(value.toString());
          this.calendar4.show = false;
          this.calendar4.value = value;
          console.log(new Date(value[0], value[1], value[2]));
          console.log(new Date(this.calendar3.value[0], this.calendar3.value[1], this.calendar3.value[2]));
          if (new Date(value[0], value[1], value[2]) <= new Date(this.calendar3.value[0], this.calendar3.value[1], this.calendar3.value[2])) {
            this.$dialog.alert({mes: '入住日期不能大于或等于离店日期！'});
            return;
          }
          this.calendar4.display = value.join('-');
          this.date2 = new Date(value[0], value[1] - 1, value[2]);
          // console.log(this.date2);
          console.log('#$%$#%#$%#$%')
          this.dayWeek2 = this.weekday[this.date2.getDay()];
          this.year2 = value[0];
          this.month2 = value[1];
          var monthInEng1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'];
          this.monthEng = monthInEng1[this.month];
          this.day2 = value[2];
          this.create_time2 = this.calendar4.display;
          console.log(this.calendar4.display);
        }
      }
    }
  },
  watch: {
    checkbox1 (val) {
      console.log(val);
      console.log(val[0]);
      this.pet = val[0];
    },
    checkbox2 (val) {
      console.log(val);
      console.log(val[0]);
      this.foreign_guest = val[0];
    }
  },
  mounted() {
    this.weekday = new Array(7);
    this.weekday[0] = '星期日';
    this.weekday[1] = '星期一';
    this.weekday[2] = '星期二';
    this.weekday[3] = '星期三';
    this.weekday[4] = '星期四';
    this.weekday[5] = '星期五';
    this.weekday[6] = '星期六';
    // 第一个控件
    this.date = new Date()
    this.calendar3.value = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate()];
    this.calendar3.display = this.calendar3.value.join('-');
    this.year = this.date.getFullYear();
    this.month = this.date.getMonth() + 1;
    this.monthEng = this.monthInEng[this.month - 1];
    this.day = this.date.getDate();
    this.create_time = this.calendar3.display;
    this.dayWeek = this.weekday[this.date.getDay()];
    // 第二个控件
    // this.date2 = new Date(this.date);
    this.date2 = this.date.getTime() + 1000 * 60 * 60 * 24;
    this.date2 = new Date(this.date2);
    // console.log(this.date2.getTime());
    this.year2 = this.date2.getFullYear();
    this.month2 = this.date2.getMonth() + 1;
    this.day2 = this.date2.getDate();
    this.create_time2 = this.calendar4.display;
    this.dayWeek2 = this.weekday[this.date2.getDay()];
    this.calendar4.value = [this.date2.getFullYear(), this.date2.getMonth() + 1, this.date2.getDate()];
    this.calendar4.display = this.calendar4.value.join('-');
    console.log(this.calendar3.value);
    console.log(this.calendar4.value);
  },
  methods: {
    openByDrop (e) {
      this.calendar3.show = true;
      this.calendar3.left = e.target.offsetLeft + 19;
      this.calendar3.top = e.target.offsetTop + 70;
      e.stopPropagation();
      window.setTimeout(() => {
        document.addEventListener('click', (e) => {
          this.calendar3.show = false;
          document.removeEventListener('click', () => {}, false);
        }, false);
      }, 1000)
    },
    openByDrop2 (e) {
      this.calendar4.show = true;
      this.calendar4.left = e.target.offsetLeft + 19;
      this.calendar4.top = e.target.offsetTop + 70;
      e.stopPropagation();
      window.setTimeout(() => {
        document.addEventListener('click', (e) => {
          this.calendar4.show = false;
          document.removeEventListener('click', () => {}, false);
        }, false);
      }, 1000)
    }
  }
}
</script>
<style scoped>
.title{
  font-size: 20px;
  margin:10px;
}
.fengexian{
  border-bottom: 1px solid #999999;
  margin-left: 4%;
  margin-top: 10px;
  width: 90%;
}

</style>
